/*rVKCl54IX2EDp1nlLn9SJlY34AwERewPEyBRWHLJHsU2Fd4m4pPSHnfdLklRtuf9*/
/**
 * Created by liqiankun on 2018/8/03.
 * 两框之间的元素迁移
 */

import React, {Component} from 'react';
import {high,base,ajax, deepClone, createPage, getMultiLang} from 'nc-lightapp-front';
const { Transfer } = high;
// import '../../css/searchModal/index.less';
import '../../../public/reportcss/searchmodalpage.less'
const { NCButton: Button } = base;


class TransferCom extends Component{
    constructor(props){
        super(props);
        this.state = {
            json: {},
            targetKeys:[],
            selectedKeys: [],
            modalSize: ''
        };
    }
    componentWillMount() {
        let callback= (json) =>{
            this.setState({
                json:json
            },()=>{
                // initTemplate.call(this, this.props);
            })
        }
        getMultiLang({moduleId:'transfer',domainName:'gl',currentLocale:'simpchn',callback});
    }
    componentDidMount() {
        this.props.TransferComRef(this)
    }

    handleScroll = (direction, e) => {


    }
    show = () => {
        this.props.modal.show('condition');
    }
    close = () => {
        this.props.modal.close('condition');
    }
    beSureBtnClick = () => {
        let { sure } = this.props;
        sure && sure();
    }
    modalContent = () => {
        let {data, targetKeys, selectedKeys, handleChange, handleSelectChange} = this.props;
        return(
            <div className = 'myOwnTransfer'>
                <Transfer
                    dataSource={ data }
                    targetKeys={targetKeys}
                    selectedKeys={selectedKeys}
                    onChange={handleChange}
                    onSelectChange={handleSelectChange}
                    onTargetKeysChange={handleChange}
                    onScroll={this.handleScroll}
                    showMoveBtn={false}
                    showSearch={true}
                    lazy = {{container: 'modal' }}
                    listRender={({ key, title }) => title}
                    notFoundContent={['', '']}
                    // listStyle={{ width: '42%' }}
                    searchPlaceholder = {this.state.json['transfer-000002']}/* 国际化处理： 搜索会计科目*/
                />
            </div>
        )
    }
    render(){
        let {json} = this.state;
        let { modal} = this.props;
        return(
            <div>
                {modal.createModal('condition', {
					title: json['transfer-000000'], /* 国际化处理： 条件框*/
					content: this.modalContent(), //弹框内容，可以是字符串或dom
                    showMaxButton: true,
                    bodyHeight: '540px',
                    customBtns:<div><Button fieldid='confirm' onClick={this.beSureBtnClick}>{json['transfer-000001']}</Button></div>, //JSX结构，样式需要自己写 确认
					showCustomBtns: true,//允许自定义footer里的按钮,默认false显示 确定 和 取消 按钮，true是传入自定义的按钮
					closeModalEve: this.beSureBtnClick, //关闭按钮事件回调
				})}
            </div>
        )
    }
}

TransferCom = createPage({})(TransferCom)

export default TransferCom;

/*rVKCl54IX2EDp1nlLn9SJlY34AwERewPEyBRWHLJHsU2Fd4m4pPSHnfdLklRtuf9*/